import React, { lazy, Suspense } from 'react'
import { useRoutes, RouteObject } from 'react-router-dom'
import KeepAlive, { AliveScope } from 'react-activation'
import './index.less'
import { lazyFix } from './fixLazyLoad'
const modules = import.meta.glob('../pages/**/*.tsx')
import Layout from '@/containers/BaseLayout/index'
export interface RouteObjectObj {
  children?: RouteObjectObj[]
  element?: React.ReactNode
  component?: React.LazyExoticComponent<any>
  path: string
  isKeepAlive?: boolean
}
const handleRouters = (allRouters: IRoutesType[]): RouteObjectObj[] => {
  return allRouters.map((item: IRoutesType) => ({
    component: item.resourcePath ? lazy(() => lazyFix(modules[`${item.resourcePath}`])) : undefined,
    children: item.children && item.children.length > 0 ? handleRouters(item.children) : undefined,
    path: item.path,
    isKeepAlive: !!item.cache,
  }))
}
const routers: IRoutesType[] = [
  {
    id: 26,
    applicationId: 2,
    parentId: 0,
    name: '路由管理',
    path: 'routes/list',
    resourcePath: '../pages/Routes/index.tsx',
    cache: 0,
    icon: 'icon-chanpinzhongxin',
    type: 'MENU',
    children: null,
    sorted: 26,
    fullPath: '/routes/list',
  },
  {
    id: 27,
    applicationId: 2,
    parentId: 0,
    name: '应用管理',
    path: 'app/list',
    resourcePath: '../pages/App/index.tsx',
    cache: 0,
    icon: 'icon-chanpinzhongxin',
    type: 'MENU',
    children: null,
    sorted: 27,
    fullPath: '/app/list',
  },
  {
    id: 28,
    applicationId: 2,
    parentId: 0,
    name: '系统管理',
    path: 'system',
    resourcePath: '',
    cache: 0,
    icon: 'icon-chanpinzhongxin',
    type: 'MENU',
    children: [
      {
        id: 29,
        applicationId: 2,
        parentId: 28,
        name: '组织管理',
        path: 'org/list',
        resourcePath: '../pages/Org/index.tsx',
        cache: 0,
        icon: 'icon-chanpinzhongxin',
        type: 'MENU',
        children: null,
        sorted: 29,
        fullPath: '/system/org/list',
      },
      {
        id: 29,
        applicationId: 2,
        parentId: 28,
        name: '组织管理',
        path: 'org/add',
        resourcePath: '../pages/Org/add.tsx',
        cache: 0,
        icon: 'icon-chanpinzhongxin',
        type: 'MENU',
        children: null,
        sorted: 29,
        fullPath: '/system/org/add',
      },
      {
        id: 30,
        applicationId: 2,
        parentId: 28,
        name: '角色管理',
        path: 'role/list',
        resourcePath: '../pages/Role/index.tsx',
        cache: 0,
        icon: 'icon-chanpinzhongxin',
        type: 'MENU',
        children: null,
        sorted: 30,
        fullPath: '/system/role/list',
      },
      {
        id: 31,
        applicationId: 2,
        parentId: 28,
        name: '角色编辑',
        path: 'role/edit',
        resourcePath: '../pages/Role/edit.tsx',
        cache: 0,
        icon: 'icon-chanpinzhongxin',
        type: 'ROUTE',
        children: null,
        sorted: 31,
        fullPath: '/system/role/edit',
      },
      {
        id: 33,
        applicationId: 2,
        parentId: 28,
        name: '角色详情',
        path: 'role/detail',
        resourcePath: '../pages/Role/detail.tsx',
        cache: 0,
        icon: 'icon-chanpinzhongxin',
        type: 'ROUTE',
        children: null,
        sorted: 31,
        fullPath: '/system/role/detail',
      },
      {
        id: 34,
        applicationId: 2,
        parentId: 28,
        name: '用户管理',
        path: 'user/list',
        resourcePath: '../pages/User/index.tsx',
        cache: 0,
        icon: 'icon-chanpinzhongxin',
        type: 'MENU',
        children: null,
        sorted: 33,
        fullPath: '/system/user/list',
      },
    ],
    sorted: 28,
    fullPath: '/system',
  },
]
const allRouters: RouteObjectObj[] = [
  { path: '', component: lazy(() => import('@/pages/Login')) },
  {
    element: (
      <AliveScope>
        <Layout />
      </AliveScope>
    ),
    path: '/',
    children: handleRouters(routers),
  },
  {
    path: '/login',
    component: lazy(() => import('@/pages/Login')),
  },
  {
    path: '/404',
    component: lazy(() => import('@/components/NotFound')),
  },
  {
    path: '/403',
    component: lazy(() => import('@/components/NotPermission')),
  },
  {
    path: '*',
    component: lazy(() => import('@/components/NotFound')),
  },
]

const setElement = (Child: React.LazyExoticComponent<any>, isKeepAlive: boolean, path: string) => {
  if (isKeepAlive) {
    return (
      <KeepAlive cacheKey={path} saveScrollPosition autoFreeze={false}>
        <Suspense fallback={<div id="page_loading_wrap" />}>
          <Child />
        </Suspense>
      </KeepAlive>
    )
  } else {
    return (
      <Suspense fallback={<div id="page_loading_wrap" />}>
        <Child />
      </Suspense>
    )
  }
}
const syncRouter = (table: RouteObjectObj[]): RouteObject[] => {
  return table.map((route) => ({
    path: route.path,
    element: route.element
      ? route.element
      : route.component && setElement(route.component, !!route.isKeepAlive, route.path),
    children: route.children && syncRouter(route.children),
  }))
}
export default function AppRouter() {
  const routers: React.ReactElement | null = useRoutes(syncRouter(allRouters))
  return routers
}
export { routers }
